import { Table, Card, Pagination, Field, DatePicker2, Form, Input, Badge, Box, Button, Icon } from '@alifd/next';
import { Link, useHistory } from 'ice';
import { stayAppraisalList, alreadyAppraisalList } from '../services';
import { useFusionTable } from 'ahooks';
import styles from './list.module.scss';
import { FormattedDate, FormattedMessage } from 'react-intl';
import { getEnumLabel } from '@/utils/enum';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { AppraiseResultEnums } from '@/pages/OperationCenter/LogisticsDetail/entity';

const { RangePicker } = DatePicker2;

interface Props {
  receive?: boolean;
}

const FilterList: React.FunctionComponent<Props> = ({ receive }: Props): JSX.Element => {
  const history = useHistory();
  const field = Field.useField([]);
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(
    receive ? alreadyAppraisalList : stayAppraisalList,
    {
      field,
    },
  );
  const { submit, reset } = search;

  const linkToReceive = () => {
    history.push('/operationCenter/logisticsDetail', { type: 'appraisalScan' });
  };

  return (
    <Card free>
      <Card.Content>
        <Form className="filter-form" responsive fullWidth labelAlign="left" field={field}>
          <Form.Item colSpan={4} label="订单号:">
            <Input name="orderNo" hasClear placeholder="搜索订单号" />
          </Form.Item>
          {receive ? (
            <Form.Item colSpan={4} label="防伪标识:">
              <Input name="securityCode" hasClear placeholder="搜索防伪标识" />
            </Form.Item>
          ) : (
            <Form.Item colSpan={4} label="卖家编号:">
              <Input name="sellerId" hasClear placeholder="搜索卖家编号" />
            </Form.Item>
          )}
          <Form.Item colSpan={4} label="库位编码:">
            <Input name="stockNo" hasClear placeholder="搜索库位编码" />
          </Form.Item>
          <Form.Item colSpan={4} label={receive ? '收货时间:' : '鉴定时间:'}>
            <RangePicker name="filterTime" />
          </Form.Item>
          <Form.Item colSpan={8} className={styles['form-actions']}>
            <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: '20px' }}>
              <FormattedMessage id="btn.search" />
            </Form.Submit>
            <Form.Reset onClick={reset}>
              <FormattedMessage id="btn.reset" />
            </Form.Reset>
          </Form.Item>
        </Form>
      </Card.Content>
      {!receive ? (
        <Button type="primary" iconSize="xs" className={styles.addBtn} onClick={linkToReceive}>
          <Icon type="add" />
          鉴定
        </Button>
      ) : null}
      <Card.Content>
        <Table
          {...tableProps}
          isZebra
          emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
          primaryKey="productAppraisalId"
        >
          <Table.Column title="物流单号" dataIndex="shippingLabel" asyncResizable hidden={receive} />
          <Table.Column title="防伪标识" dataIndex="securityCode" asyncResizable hidden={!receive} />
          <Table.Column
            dataIndex="productName"
            title="商品信息"
            asyncResizable
            cell={(val, i, row) => (
              <div className={styles.baseinfo}>
                <img
                  className={styles.img}
                  src={row.mainImage}
                  alt="商品主图"
                />
                <div>
                  <span className={styles.title}>{val}</span>
                  <div className={styles.row}>
                    <span>{`${row.brandName}/${row.categoryName}`}</span>
                    <span>{`规格:${row.attrValue || '无'}`}</span>
                  </div>
                </div>
              </div>
            )}
          />
          <Table.Column title="订单号" dataIndex="orderNo" asyncResizable />
          <Table.Column
            dataIndex="stockNo"
            title="库位编号"
            asyncResizable
          />
          <Table.Column title="卖家信息" dataIndex="sellerNickName" asyncResizable />
          <Table.Column
            title="下单时间"
            dataIndex="orderTime"
            asyncResizable
            cell={(val) => (<FormattedDate value={val} />)}
            hidden={receive}
          />
          <Table.Column
            title="收货时间"
            dataIndex="receiveTime"
            asyncResizable
            cell={(val) => (<FormattedDate value={val} />)}
            hidden={receive}
          />
          <Table.Column title="鉴定人" dataIndex="appraisalName" asyncResizable hidden={!receive} />
          <Table.Column
            title="鉴定结果"
            dataIndex="result"
            asyncResizable
            hidden={!receive}
            cell={(val) => (
              <div>
                <Badge
                  dot
                  style={{
                    marginRight: 5,
                    backgroundColor: getEnumLabel(AppraiseResultEnums, val, ['value', 'color']),
                  }}
                />
                {getEnumLabel(AppraiseResultEnums, val)}
              </div>
            )}
          />
          <Table.Column
            title="鉴定时间"
            dataIndex="appraisalTime"
            asyncResizable
            cell={(val) => (<FormattedDate value={val} />)}
            hidden={!receive}
          />
          <Table.Column
            dataIndex="shippingLabel"
            title="操作"
            cell={(val) => (
              <Link
                to={{
                  pathname: '/operationCenter/logisticsDetail',
                  state: { shippingLabel: val, type: 'appraisal' },
                }}
              >
                {receive ? '查看' : '鉴定'}
              </Link>
            )}
          />
        </Table>
        <Pagination
          style={{ marginTop: 16, textAlign: 'right' }}
          shape="arrow-only"
          totalRender={(total) => (
            <FormattedMessage
              id="page.total"
              tagName="div"
              values={{ total }}
            />
          )}
          {...paginationProps}
        />
      </Card.Content>
    </Card>
  );
};

export default FilterList;
